<template>
  <div>
    <!-- 添加废品按钮 -->
    <el-button type="primary" @click="dialogVisible2=true">添加废品</el-button>
    <!--    //废品展示表格-->
    <template>
      <el-table :data="type" border style="width: 100%">
        <el-table-column fixed prop="typeName" label="废品名字" width="100">
        </el-table-column>
        <el-table-column label="商品图片" width="150">
          <template slot-scope="scope">
            <img :src="scope.row.typeImage" width="40" height="40" />

          </template>
        </el-table-column>
        <el-table-column prop="typeMoney" label="废品参考价格" width="100">
        </el-table-column>
        <el-table-column prop="units" label="单位" width="100">
        </el-table-column>
        <el-table-column prop="typeState" label="状态" width="100">
        </el-table-column>
        <el-table-column prop="addTime" label="添加时间" width="100">
        </el-table-column>

        <el-table-column prop="updateTime" label="修改时间" width="100">
        </el-table-column>
        <el-table-column prop="operator" label="操作角色" width="100">
        </el-table-column>

        <el-table-column label="商品状态" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.typeState==0">上架</span>
            <span v-if="scope.row.typeState==1">下架</span>
            <span v-if="scope.row.typeState==2">删除</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button v-if="scope.row.typeState==0" @click="modifyTypeState(scope.row.typeId,1)" type="text"
              size="small">下架</el-button>
            <el-button v-if="scope.row.typeState==1" @click="modifyTypeState(scope.row.typeId,0)" type="text"
              size="small">上架</el-button>
            <el-button @click="modifyTypeState(scope.row.typeId,2)" type="text" size="small">删除</el-button>
            <el-button type="text" @click="myType(scope.row)" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      </el-table>
    </template>



    <!-- 修改type -->
    <el-dialog title="修改商品" :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
      <p style="display: inline-block;">修改废品名字：</p>
      <input type="text" style="" v-model="myType1.typeName" /></br>
      <p style="display: inline-block;">修改废品参考价格：</p>
      <input type="text" style="" v-model="myType1.typeMoney" /></br>
      <p style="display: inline-block;">修改单位：</p>
      <input type="text" style="" v-model="myType1.units" /></br>


      <el-upload :headers="headers" :on-success="img" class="upload-demo"
        action="http://localhost:9099/platform/type/uploadTypeImage.admin" multiple name="photo">
        <el-button size="small" type="primary">修改商品图片</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>

      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="ok">确 定</el-button>
      </span>
    </el-dialog>



    <!-- 修改type -->
    <el-dialog title="添加废品" :visible.sync="dialogVisible2" width="40%" :before-close="handleClose">
      <p style="display: inline-block;">废品名字：</p>
      <input type="text" style="" v-model="myType2.typeName" /></br>
      <p style="display: inline-block;">参考价格：</p>
      <input type="text" style="" v-model="myType2.typeMoney" /></br>
      <p style="display: inline-block;">单位：</p>
      <input type="text" style="" v-model="myType2.units" /></br>


      <el-upload :headers="headers" :on-success="img2" class="upload-demo"
        action="http://localhost:9099/platform/type/uploadTypeImage.admin" multiple name="photo">
        <el-button size="small" type="primary">添加废品图片</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2=flase">取 消</el-button>
        <el-button type="primary" @click="ok2">确 定</el-button>
      </span>
    </el-dialog>




  </div>
</template>

<script>
  export default {
    data() {
      return {
        type: [],
        myType1: {},
        myType2:{},
        dialogVisible: false,
        dialogVisible2:false,
        typeState: {
          typeId: "",
          state: ""
        },
        headers: {
          ecologyToken: localStorage.getItem("ecologyToken")
        }
      }

    },
    methods: {
      handleClose() {//修改类容关闭取消函数
       this.showTypeAdmin()


        this.dialogVisible = false
      },
      showTypeAdmin() {
        this.$http.post("/platform/type/showType.admin", this.typeName)
          .then(resp => {
            this.type = resp.data.data

            if (resp.data.code != 200) {
              alert(resp.data.message)
            }

          })

      },
      modifyTypeState(obj, obj1) {
        alert(obj)
        this.typeState.state = obj1
        this.typeState.typeId = obj
        this.$http.post("/platform/type/modifyTypeState.admin", this.typeState)
          .then(resp => {

            if (resp.data.code != 200) {
              alert(resp.data.message)
            }
            this.showTypeAdmin()
          })
      },
      myType(obj) {
        this.myType1.typeId = obj.typeId
        this.myType1.typeName=obj.typeName
        this.myType1.typeMoney=obj.typeMoney
        this.myType1.units=obj.units

        this.dialogVisible = true
      },
      img(response) { //添加商品类容图片-上传
        this.myType1.typeImage = response.data
        if (resp.data.code != 200) {
          alert(resp.data.message)
        }

      },
      img2(response) { //添加商品类容图片-上传
        this.myType2.typeImage = response.data
        if (resp.data.code != 200) {
          alert(resp.data.message)
        }

      },
      ok(){
        this.$http.post("/platform/type/modifyType.admin", this.myType1)
          .then(resp => {
            this.showTypeAdmin()

            if(resp.data.code!=200){
              alert(resp.data.message)
            }
            this.dialogVisible = false


          })
      },
      ok2() { //添加商品类容确定

        this.$http.post("/platform/type/uploadType.admin", this.myType2)
          .then(resp => {

            if(resp.data.code!=200){
              alert(resp.data.message)
            }
            this.dialogVisible2 = false
  this.showTypeAdmin()

          })
      },

    },

    created() {
      this.showTypeAdmin()
    }
  }
</script>

<style>

</style>
